// useEffect
// 作用: 为react组件提供副作用处理

// 副作用？
// 函数式编程
// 函数组件 主要的作用 简单理解  根据不同的状态 state + props => UI
// 1. ls
// 2. 发送网路请求
// 3. 更改dom title

// 在react组件中 如果想要编写一些副作用的逻辑操作  就要写到useEffect


// useEffect依赖项带来的执行逻辑

// 1. 没有依赖项   初始化执行一次 + 每次组件重新渲染都会重新执行
// 2. 空数组依赖项  只在初始化的时候执行一次  [发送网络接口请求]
// 3. 明确的依赖项  初始化的时候执行一次  + 具体的依赖项发生变化的时候再次执行


// useEffect注意的事儿
// 1. useEffect回调中如果用到了某个状态数据 一定要把它加到依赖项中 不要骗它  [工具提示]
// 2. useEffect副作用函数的执行 是在组件渲染完成之后才做的  访问dom
// 3. useEffect提供了一个全新的编写应用的方式  [生命周期 + 状态管理 => 应用]   [状态管理 + 副作用 => 应用]

import { useEffect, useState } from 'react'

const App = () => {
  const [count, setCount] = useState(0)
  const [count1, setCount1] = useState(0)
  useEffect(() => {
    console.log('useEffect又执行了')
    // 写副作用逻辑
    document.title = count
  }, [count])
  return (
    <div>
      this is App
      <button onClick={() => setCount(count + 1)}>+{count}</button>
      <button onClick={() => setCount1(count1 + 1)}>+{count1}</button>
    </div>
  )
}

export default App